<template>
    <div>
        <div class="top_box container_box">
            <p class="page-title font-weight-500">订单列表
                <el-tooltip class="item"
                            effect="dark"
                            content="刷新"
                            placement="right">
                    <el-button class="refresh-btn"
                               icon="el-icon-refresh"
                               type="primary"
                               circle
                               plain
                               @click="getTableData"
                               size="mini"></el-button>
                </el-tooltip>
            </p>
        </div>

        <div class="padding_box">
            <div class="search_box container_box">
                <!-- u-flex u-row-between -->
                <div class="">
                    <el-form :inline="true"
                             label-width="80px"
                             :model="queryData">
                        <el-form-item label="">
                            <el-input clearable
                                      v-model="queryData.memberTelNo"
                                      placeholder="请输入家长手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input clearable
                                      v-model="queryData.orderSn"
                                      placeholder="请输入订单编号"></el-input>
                        </el-form-item>
                        <el-form-item class="aa">
                            <el-autocomplete clearable
                                             v-model="curriculumEle"
                                             popper-class="my-autocomplete"
                                             :debounce="500"
                                             :trigger-on-focus="false"
                                             :fetch-suggestions="querySearchAsync1"
                                             placeholder="请输入课程名搜索"
                                             @select="handleSelectCurriculumId">
                                <template slot-scope="{ item }">
                                    <div v-if="item.name"
                                         class="name">{{ item.categoryName }} {{ '（' + item.name + '）' }}</div>
                                    <div v-else
                                         class="name"
                                         style="">无匹配数据</div>
                                </template>
                            </el-autocomplete>
                        </el-form-item>
                        <el-form-item label="">
                            <el-cascader ref="myCascader"
                                         clearable
                                         filterable
                                         :show-all-levels="false"
                                         separator=">"
                                         placeholder="请选择课程类型"
                                         v-model="productCategory"
                                         @change="handleChange"
                                         :options="productCategoryList"
                                         :props="{ expandTrigger: 'hover', checkStrictly: true, value:'id',label:'name',children:'children', }">
                            </el-cascader>
                        </el-form-item>
                        <el-form-item label="">
                            <el-select v-model="queryData.status"
                                       clearable
                                       placeholder="请选择订单状态">
                                <el-option v-for="item in orderStatusList"
                                           :key="item.id"
                                           :label="item.name"
                                           :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-date-picker v-model="beginEndTime"
                                            type="datetimerange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="right-box u-flex u-row-between">
                    <div>
                        <el-button icon="el-icon-download"
                                   @click="exportExcel">导出数据</el-button>
                    </div>
                    <div>

                        <el-button type="success"
                                   @click="handleForClassAll">分班调课</el-button>
                        <el-button type="primary"
                                   @click="getSearchData">搜索</el-button>
                        <el-button icon="el-icon-refresh-left"
                                   @click="cleanQueryData">清空筛选</el-button>
                    </div>

                </div>
            </div>
            <div>
                <el-table ref="multipleTable"
                          v-loading="loading"
                          class="my_table"
                          header-row-class-name="order_header"
                          :data="tableData"
                          tooltip-effect="dark"
                          @selection-change="handleSelectionChange"
                          style="width: 100%">
                    <el-table-column type="selection"
                                     width="55">
                    </el-table-column>
                    <el-table-column width="300"
                                     label="商品信息">
                        <template slot-scope="scope">
                            <el-popover placement="top"
                                        width="500"
                                        trigger="hover">
                                <div class=""
                                     v-for="(item,index) in scope.row.items && scope.row.items"
                                     :key="index">

                                    <span style="margin:5px;">调课前排课表id：{{ item.oldClassSchduleId }}</span>
                                    <span style="margin:5px;">调课前课程id：{{ item.oldProductId }}</span>
                                    <span style="margin:5px;">调课前课程名称：{{ item.oldProductName }}</span>
                                </div>
                                <div slot="reference"
                                     class="good_more_info">
                                    <div v-for="(item,index) in scope.row.items && scope.row.items"
                                         :key="item.id"
                                         class="order_item_box u-flex u-col-top">
                                        <img class="order_img"
                                             :src="item.productPic">
                                        <div class="">
                                            <div class="order_title1 font-weight-500 u-flex">{{ item.productName }}
                                                <el-button style="height: 30px;"
                                                           size="mini"
                                                           v-if="item.status == 0"
                                                           type="warning"
                                                           @click="agreeHandleRefundOrder(item)">退款</el-button>
                                            </div>
                                            <div class="order_guige u-flex-col">
                                                <div class="order_material"
                                                     v-for="(skuItem,skuIndex) in JSON.parse(item.skuData)"
                                                     :key="skuIndex">
                                                    {{ skuItem.name }}：{{ skuItem.value }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="item_status_box u-flex u-col-center">
                                            <div class="u-flex">
                                                <div class="status_text"
                                                     v-if="item.status == 20">
                                                    {{  '退课待审核' }}
                                                </div>
                                                <div class="u-flex"
                                                     v-if="item.status==20">
                                                    <el-button size="mini"
                                                               type="success"
                                                               @click="agreeHandleRefundOrder(item)">同意</el-button>
                                                    <el-button size="mini"
                                                               type="warning"
                                                               @click="refuse(item,false,item.status)">拒绝</el-button>
                                                </div>
                                            </div>
                                            <div v-if="item.status == 21"
                                                 style="color:#1B93F8;">{{  '已退款' }}</div>

                                        </div>
                                    </div>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="totalAmountStr"
                                     label="订单总价（元）"
                                     align="center">
                        <template slot-scope="scope">
                            ￥ {{ scope.row.totalAmount / 100 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="payAmountStr"
                                     label="实付款（元）"
                                     align="center">
                        <template slot-scope="scope">
                            ￥ {{ scope.row.payAmount / 100 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="address"
                                     label="用户"
                                     show-overflow-tooltip>
                        <template slot-scope="scope">
                            <!-- <business-card :cardData='scope.row.shopkeeperNameCardVO'></business-card> -->
                            <p>家长：{{ scope.row.nickName }}</p>
                            <p>家长手机：{{ scope.row.memberTelNo }}</p>
                            <p>学生：{{ scope.row.childrens.childrenName }}</p>
                            <p>班级：{{ scope.row.childrens.grade }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="note"
                                     label="订单备注"
                                     align="center">
                    </el-table-column>

                    <el-table-column prop="paymentTime"
                                     label="支付时间"
                                     align="center">
                    </el-table-column>
                    <el-table-column prop="status"
                                     label="订单状态"
                                     align="center">
                        <template slot-scope="scope">
                            <div class="u-flex-col u-col-center">
                                <span :style="scope.row.status | colorFilter">{{ scope.row.status | statusFilter }}</span>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作"
                                     fixed="right"
                                     width="150">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.status==70"
                                       size="mini"
                                       type="success"
                                       @click="agreeHandleRefundOrder(scope.row)">同意</el-button>
                            <el-button v-if="scope.row.status==80"
                                       size="mini"
                                       type="success"
                                       @click="agreeHandleForClass(scope.row)">同意</el-button>
                            <el-button v-if="scope.row.status==70 || scope.row.status==80"
                                       size="mini"
                                       type="warning"
                                       @click="refuse(scope.row,false,scope.row.status)">拒绝</el-button>
                            <!-- <el-button size="mini"
                                       type="primary"
                                       @click="OrderDetails(scope.row)">详情</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="text-align: right;"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="queryData.pageNum"
                               :page-size="queryData.pageSize"
                               :page-sizes="[5, 10, 20, 40]"
                               :total="pageTotal"
                               layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="退款"
                   :visible.sync="showFundOrder"
                   width="50%">
            <el-form :model="fundOrderData"
                     label-width="120px">
                <el-form-item style="width:40%"
                              prop="priceDouble"
                              onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                              label="退款金额 (元)">
                    <el-input-number placeholder="请输入退款金额"
                                     :min="0"
                                     :controls="false"
                                     :precision="2"
                                     v-model.trim="fundOrderData.refundPrice"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="showFundOrder = false">取 消</el-button>
                <el-button type="primary"
                           @click="confirmFundOrder"
                           v-preventClick>确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加弹出框 -->
        <el-dialog title="请选择要调的课程"
                   :visible.sync="showCurriculumTypeDialog"
                   width="50%">
            <el-form :model="currentEditEle"
                     label-width="150px">
                <el-form-item v-if="singleForClass"
                              label="选择课程"
                              class="aa">
                    <el-select v-model="currentEditEle.orderId"
                               clearable
                               placeholder="请选择需调整的课程">
                        <el-option v-for="item in HandleForClassData"
                                   :key="item.id"
                                   :label="item.name"
                                   :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择要的新课程"
                              class="aa">
                    <el-autocomplete clearable
                                     v-model="curriculumEle2"
                                     popper-class="my-autocomplete"
                                     :debounce="500"
                                     :trigger-on-focus="false"
                                     :fetch-suggestions="querySearchAsync2"
                                     placeholder="请输入课程名搜索"
                                     @select="handleSelectCurriculumId2">
                    </el-autocomplete>
                </el-form-item>
                <el-form-item label="课程SKU"
                              prop="specifications">
                    <div class="sku-box">
                        <div style="margin-bottom:25px;">
                            <div v-for="(item,index) in skuList"
                                 :key="index"
                                 class="specifications-value-box">
                                <div class="specifications-title">规格名：{{ item.name }}</div>
                                <div class="u-flex u-flex-wrap">
                                    <div class="specifications-value"
                                         v-for="(item1,index1) in item.values"
                                         :key="index1"
                                         :class="{ 'active': selectArr[index] == index1 }"
                                         @click="changeSpecification(index, index1)">
                                        {{ item1 }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <el-table :data="[currentSkuData]"
                                  stripe
                                  border
                                  class="my_table"
                                  ref="multipleTable"
                                  header-cell-class-name="table-header">
                            <el-table-column prop=""
                                             label="课程图"
                                             align="center">
                                <template slot-scope="scope">
                                    <div class="u-flex">
                                        <el-image class="avatar"
                                                  :src="scope.row.pic">
                                        </el-image>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="所选规格"
                                             align="center">
                                <template slot-scope="scope"
                                          v-if="scope.row.spDataList">
                                    <p v-for="(item1,index1) in scope.row.spDataList"
                                       :key="index1"> {{ item1.value }} {{  (scope.row.spDataList.length>1 && index1 < scope.row.spDataList.length-1) ? '+' : ''  }}</p>
                                </template>
                            </el-table-column>
                            <el-table-column prop="priceDouble"
                                             label="在售价(元)"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop=""
                                             fixed="right"
                                             label="上架状态"
                                             align="center">
                                <template slot-scope="scope">
                                    {{ scope.row.online ?'上架':'下架' }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="showCurriculumTypeDialog = false">取 消</el-button>
                <!-- v-preventClick 防抖 -->
                <el-button type="primary"
                           :disabled="changeCurriculum"
                           @click="addOrEditCurriculum">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

import businessCard from '@/components/business-card/business-card.vue';
import axios from '@/utils/axios.js';
import { exportExcel } from '@/utils/exportExcel.js'
export default {
    name: 'basetable',
    components: {
        businessCard
    },
    data() {
        return {
            tableWidth: '',     // 商品列表宽度
            collapseName: '-1', // 是否展开搜索栏
            queryData: {
                categoryId: '',
                memberTelNo: '',
                productName: '',
                status: '',
                pageSize: 10,
                pageNum: 1,
            },
            pageTotal: 0,
            orderStatusList: [
                { id: 20, name: '待支付' }, { id: 70, name: '退款待审核' }, { id: 73, name: '已退全款' },
                { id: 80, name: '调课中' }, { id: 81, name: '调课成功' }, { id: 1000, name: '交易完成' },
                // { id: 0, name: '待付款' }, { id: 10, name: '订单提交失败' }, { id: 11, name: '商品超卖，订单提交失败' }, { id: 20, name: '订单提交成功-待支付' },
                // { id: 21, name: '用户选择取消订单' }, { id: 22, name: '超时未支付-取消订单' }, { id: 23, name: '用户线下已汇款' }, { id: 30, name: '支付成功-待配货' },
                // { id: 31, name: '配货中' }, { id: 40, name: '已出库' }, { id: 70, name: '退款待审核' }, { id: 71, name: '退款处理中' },
                // { id: 72, name: '订单部分退款' }, { id: 73, name: '已退全款' }, { id: 50, name: '订单已确认完成' }, { id: 1000, name: '交易完成' },
            ],
            payVoucherList: [
                { id: 0, name: '未提交' }, { id: 1, name: '已提交' },
            ],
            partnerLeverList: [],
            tableData: [],
            loading: false,
            beginEndTime: '',
            // 课程分类回显idList
            productCategory: '',
            // 课程分类
            productCategoryList: [],
            curriculumEle: '',
            curriculumEle2: '',
            showFundOrder: false,
            fundOrderData: {},
            showCurriculumTypeDialog: false,
            currentEditEle: {
                productId: '',
            },
            selectArr: [],
            currentSkuData: {},
            skuList: [],
            productSkuList: [],
            changeCurriculum: false,

            multipleSelection: [],
            HandleForClassData: [],
            singleForClass: true,
        };
    },
    watch: {
        beginEndTime(newV, oldValue) {
            if (newV && newV.length > 0) {
                //  + ' 00:00:00' + ' 23:59:59'
                this.queryData.startTime = newV[0]
                this.queryData.endTime = newV[1]
            } else {
                delete this.queryData.startTime
                delete this.queryData.endTime
            }

        },
        curriculumEle(newV) {
            if (newV.length == 0) {
                this.queryData.productName = ''
                this.queryData.categoryId = ''
            }
        },
        curriculumEle2(newV) {
            if (newV.length == 0) {
                this.currentEditEle.classSchduleId = ''
                this.currentEditEle.productId = ''
                this.this.skuList = []
            }
        },
        'currentEditEle.productId': {
            handler(newV) {
                this.getProductById(newV)
            }
        },
        selectArr: {
            handler(newVal, oldVal) {
                let key = newVal.join('-')
                let currentSkuData = this.productSkuList.find(ele => ele.speciaId == key)
                if (!currentSkuData) {
                    this.$message.error('当前组合不可选');
                    this.changeCurriculum = true
                } else {
                    // 已有这个sku
                    this.changeCurriculum = false
                    this.currentSkuData = currentSkuData
                    this.currentEditEle.skuId = currentSkuData.id
                }
            },
            deep: true
        },
        productCategory(newV) {
            this.queryData.categoryId = newV[newV.length - 1]
            console.log('.>>>>>>>>>>>>>>>>>>>>>>>>>', this.queryData.categoryId)
        }
    },
    computed: {
    },
    filters: {
        statusFilter(status) {
            switch (status) {
                // case 0:
                //     return '待付款'
                // case 10:
                //     return '订单提交失败'
                // case 11:
                //     return '商品超卖，订单提交失败'
                // case 20:
                //     return '订单提交成功-待支付'
                // case 21:
                //     return '用户选择取消订单'
                // case 22:
                //     return '超时未支付-取消订单'
                // case 23:
                //     return '用户线下已汇款'
                // case 30:
                //     return '支付成功-待配货'
                // case 31:
                //     return '配货中'
                // case 40:
                //     return '已出库'
                // case 50:
                //     return '订单已确认完成'
                // case 70:
                //     return '退款待审核'
                case 71:
                    return '退款处理中'
                // case 72:
                //     return '订单部分退款'
                case 73:
                    return '退款完成'
                // case 1000:
                //     return '交易完成'
                case 1000:
                    return '支付成功'
                case 73:
                    return '退款成功'
                case 81:
                    return '调课成功'
                case 20:
                    return '待付款'
                case 70:
                    return '退款中'
                case 80:
                    return '调课中'
            }
        },
        colorFilter(status) {
            if ([20, 70, 80, 71].indexOf(status) > -1) {
                return 'color:#E6A23C;'
            } else if (status == 10) {
                return 'color:#F96060;'
            } else if ([73, 81, 1000].indexOf(status) > -1) {
                return 'color:#1B93F8;'
            } else {
                return 'color:#999999;'
            }
        },
    },

    created() {
        this.getTableData()
        this.getProductCategory()
    },
    activated() {

    },
    mounted() {
        let _this = this
        this.tableWidth = this.$refs.multipleTable.$el.clientWidth

    },
    methods: {
        // 导出
        exportExcel() {
            let data = Object.assign({}, this.queryData)
            let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
            console.log('--------------------userInfo', userInfo)
            data.schoolId = userInfo.schoolId
            exportExcel(data, '订单数据Excel', 'admin/excel/orderToExcel')
        },
        // // 导出数据
        // exportExcel() {
        //     let data = Object.assign({}, this.queryData)
        //     let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        //     console.log('--------------------userInfo', userInfo)
        //     data.schoolId = userInfo.schoolId
        //     // data.pageSize = ''
        //     // data.pageNum = ''
        //     axios({
        //         url: "/admin/excel/orderToExcel",
        //         method: "post",
        //         data: data,
        //     }).then(result => {
        //         if (result.code == 0) {
        //             const { data } = result;

        //         } else {
        //             this.$message.error(data.errMsg || '失败');
        //         }

        //     })
        // },
        // 改变sku相应规格值
        changeSpecification(index, index1) {
            this.$set(this.selectArr, index, index1)
        },
        getProductById(id) {
            axios({
                url: "/admin/product/getById",
                method: "post",
                data: { id: id },
            }).then(result => {
                if (result.code == 0) {
                    const { data } = result;
                    // 规格
                    let speciaId = []
                    if (data.productSpecialVos) {
                        this.skuList = JSON.parse(JSON.stringify(data.productSpecialVos))
                        this.skuList.forEach(ele => {
                            // 初始化默认选中第一个规格值
                            speciaId.push(0)
                        });
                        this.selectArr = speciaId
                        console.log('>>>>>>>>>>>>>>>>>>>>>', this.selectArr)
                    }
                    this.productSkuList = data.skuList
                } else {
                    this.$message.error(data.errMsg || '失败');
                }

            })
        },
        querySearchAsync2(queryString, cb) {
            if (queryString.length > 0) {
                let data = {
                    keyword: queryString
                }
                axios({
                    url: "/admin/classSchedule/searchClassSchedule",
                    method: "post",
                    data
                }).then(res => {
                    let arr = []
                    if (res.code == 0 && res.data) {
                        if (res.data && res.data.length > 0) {
                            res.data.forEach(ele => {
                                arr.push({
                                    // 课表id
                                    id: ele.id,
                                    // 课程id
                                    productId: ele.productResp.id,
                                    productName: ele.productResp.name,
                                    weekStr: ele.weekStr.join(','),
                                    value: ele.weekStr.join(',') + '>' + ele.productResp.name
                                })
                            });
                            cb(arr);
                        } else {
                            let arr = [{ value: '无匹配数据' }]
                            cb(arr);
                        }
                    }
                })
            }
        },
        // 点击查询数据
        handleSelectCurriculumId2(item) {
            this.currentEditEle.classSchduleId = item.id
            this.currentEditEle.productId = item.productId
            console.log('>>>>>>>>>>>>>>>>>', item)
        },
        // 获取所有课程分类
        getProductCategory() {
            axios({
                url: "admin/productCategory/tree",
                method: "post",
            }).then(result => {
                const { data } = result;
                data.forEach(ele => {
                    this.removeChildren(ele)
                });
                this.productCategoryList = data || [];
            })
        },
        removeChildren(node) {
            if (!node.children || !node.children.length) {
                delete node.children
            }
            if (node.children && node.children.length) {
                for (let i = 0; i < node.children.length; i++) {
                    this.removeChildren(node.children[i])
                }
            }
            return true
        },
        handleChange(value) {
            // console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>', this.productCategory)
            // this.queryData.categoryId = value[value.length - 1]
        },
        cleanQueryData() {
            this.queryData = {}
        },
        handleTabClick() {

        },
        // 按条件查询
        getSearchData() {
            this.queryData.pageNum = 1
            this.queryData.pageSize = 10
            this.getTableData()
        },
        // 获取表格数据
        getTableData() {
            var _this = this;
            this.loading = true;
            axios({
                url: "/admin/order/orderSearchPage",
                method: "post",
                data: this.queryData
            }).then((result) => {
                const { data } = result;
                _this.tableData = data.list;

                _this.pageTotal = data.total
                _this.loading = false;
                _this.$forceUpdate()

            }).catch(err => {
                _this.loading = false;
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.queryData.pageSize = val
            this.getTableData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.queryData.pageNum = val
            this.getTableData()
        },
        querySearchAsync1(queryString, cb) {
            if (queryString.length > 0) {
                let data = {
                    keyword: queryString
                }
                axios({
                    url: "/admin/product/listPage",
                    method: "post",
                    data
                }).then(res => {
                    let arr = []
                    if (res.code == 0 && res.data.list) {
                        if (res.data.list && res.data.list.length > 0) {
                            res.data.list.forEach(ele => {
                                arr.push({
                                    id: ele.id,
                                    categoryId: ele.categoryId,
                                    categoryName: ele.categoryName,
                                    name: ele.name,
                                    pic: ele.pic,
                                    value: ele.categoryName + '(' + ele.name + ')'
                                })
                            });
                            cb(arr);
                        } else {
                            let arr = [{ value: '无匹配数据' }]
                            cb(arr);
                        }
                    }
                })
            }
        },
        // 点击查询数据
        handleSelectCurriculumId(item) {
            this.queryData.productName = item.name
            this.queryData.categoryId = item.categoryId
        },
        checkCollapse() {
            if (this.collapseName == '2') {
                this.collapseName = '-1'
            } else {
                this.collapseName = '2'
            }
        },
        // 单个调课
        agreeHandleForClass(item) {
            let data = []
            item.items.forEach(ele => {
                data.push({
                    id: ele.id,
                    name: ele.productName
                })
            });
            this.singleForClass = true
            this.HandleForClassData = data
            this.showCurriculumTypeDialog = true
            // this.currentEditEle.orderId = item.id
        },
        // 批量调课
        handleForClassAll() {
            // admin/order/handleForClassAll
            if (!this.queryData.productName) {
                return this.$message.warning('请在搜索栏选择需分班的课程，在搜索筛选后再开始调课')
            }
            this.singleForClass = false
            let selectItemIds = []
            this.multipleSelection.forEach(ele => {
                ele.items.forEach(ele1 => {
                    console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>111', this.queryData.productName, ele1.productName);
                    if (this.queryData.productName == ele1.productName)
                        selectItemIds.push(ele1.id)
                });
            });
            this.showCurriculumTypeDialog = true
            this.selectItemIdsArr = selectItemIds
            console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>222', selectItemIds);
        },
        // 退款
        handleagreeHandleRefundOrder() {
            if (this.multipleSelection.length == 1) {
                this.fundOrderData.orderIds = [this.multipleSelection[0].id]
                this.showFundOrder = true
            } else {
                this.$message.warning('只能选择一个')
            }
        },
        // 调课
        addOrEditCurriculum() {
            let data = {
                classSchduleId: this.currentEditEle.classSchduleId,
                orderItemsId: this.singleForClass ? [this.currentEditEle.orderId] : this.selectItemIdsArr,
                skuId: this.currentEditEle.skuId,
            }
            axios({
                url: '/admin/order/handleForClassAll',
                method: "post",
                data
            }).then(res => {
                if (res.code == 0) {
                    this.$message.success(res.errMsg || '操作成功')
                    this.showCurriculumTypeDialog = false
                    setTimeout(() => {
                        this.curriculumEle = ''
                        this.getTableData()
                    }, 500);
                } else {
                    this.$message.error(res.errMsg || '操作失败')
                }
            })
        },
        // 退款
        agreeHandleRefundOrder(item) {
            this.fundOrderData.orderIds = [item.id]
            this.showFundOrder = true
        },
        // 提交退款
        confirmFundOrder() {
            let data = this.fundOrderData
            axios({
                url: '/admin/order/handleRefundOrderAll',
                method: "post",
                data
            }).then(res => {
                if (res.code == 0) {
                    this.$message.success(res.errMsg || '操作成功')
                    this.showFundOrder = false
                    setTimeout(() => {
                        this.getTableData()
                    }, 500);
                } else {
                    this.$message.error(res.errMsg || '操作失败')
                }
            })
        },
        refuse(item) {
            let data = {
                id: item.id,
            }
            let url = ''
            if (item.status == 70) {
                // 退款
                url = '/admin/order/unHandleRefundOrder'
            } else if (item.status == 80) {
                // 调课
                url = '/admin/order/unHandleForClass'
            }
            axios({
                url: url,
                method: "post",
                data
            }).then(res => {
                if (res.code == 0) {
                    this.$message.success(res.errMsg || '操作成功')
                    this.getTableData()
                } else {
                    this.$message.error(res.errMsg || '操作失败')
                }
            })
        },
        // 去详情页
        OrderDetails(row) {
            let id = row.id
            this.$router.push({ path: '/OrderDetails', query: { id: id, } });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;

        }
    }
};
</script>
<style lang="scss" scoped>
.top_box {
    background-color: #fff;
    padding-bottom: 0;
    ::v-deep {
        .el-tabs__header {
            margin: 0;
        }
        .el-tabs__item {
            color: #999;
            &.is-active {
                color: #1b93f8;
            }
        }
        .el-tabs__nav-wrap::after {
            height: 0;
        }
    }
}
.aa {
    ::v-deep {
        .el-input {
            width: 450px;
        }
    }
}
.search_box {
    margin-bottom: 25px;
    ::v-deep {
        .el-input {
            width: 250px;
        }
    }

    .aa {
        ::v-deep {
            .el-input {
                width: 450px;
            }
        }
    }

    .collapse_box {
        ::v-deep {
            .el-collapse {
                border: 0;
            }
            .el-collapse-item__wrap {
                border: 0;
            }
            .el-collapse-item__header {
                display: none;
            }
            .el-collapse-item__content {
                padding-bottom: 0;
            }
        }
    }
}
.my_table,
.order_more_table {
    font-size: 14px;
    ::v-deep {
        .el-table__row {
            td:nth-of-type(1) {
                .cell {
                    position: absolute;
                    top: 15px;
                }
            }
            td:nth-of-type(2) {
                border-right: 0;
            }
        }
        .has-gutter {
            th,
            td {
                border: 0;
            }
        }
    }
}

.goods_info,
.good_more_info {
    .order_item_box {
        position: relative;
        padding: 25px 25px 25px 0;
        &.goods-padding-top {
            padding-top: 75px;
        }
        &.goods-padding-bottom {
            padding-bottom: 55px;
        }
        .order_img {
            border-radius: 8px;
            width: 72px;
            height: 72px;
            margin-right: 8px;
        }
        .order_title1 {
            font-size: 14px;
            color: #333;
        }
        .order_guige {
            margin-top: 10px;
            font-size: 12px;
            color: #999;
        }
        .item_status_box {
            position: absolute;
            bottom: -5px;
            .status_text {
                margin-right: 15px;
                color: #e6a23c;
            }
        }
    }
}

.order_no {
    position: absolute;
    left: -55px;
    top: 0;
    padding: 15px 80px;
    // z-index: 1;
    border-bottom: 1px solid #ebeef5;
}
.more-box {
    position: absolute;
    width: 250px;
    left: 25px;
    bottom: 0;
    font-size: 16px;
    border-radius: 4px;
    padding: 8px 15px;
    background-color: #f0f0f0;
    z-index: 1;
    .blue-text {
        color: #1b93f8;
    }
}
.order_footer {
    position: absolute;
    left: -55px;
    bottom: 0;
    font-size: 16px;
    padding: 8px 0;
    background-color: #f0f0f0;
    z-index: 1;
}

.order_price {
    padding: 50px 0;
    margin-top: 2px;
}
.border-line {
    border-top: 1px solid #ebeef5;
}

::v-deep {
    .el-table td,
    .el-table th.is-leaf {
        border-bottom: 0;
    }
    .el-table th {
        background-color: #f0f0f0 !important;
    }
    .el-table--border,
    .el-table--group {
        border: 0;
    }
}
/deep/ .el-table tr {
    position: relative;
    width: 100%;
}

.payAmount-text {
    font-size: 18px;
    color: #333;
}
</style>
<style lang="scss">
.max-heigth-popover {
    max-height: 300px !important;
    overflow: auto !important;
}

.el-table th {
    color: #333333;
}
.order_more_table {
    .el-table__footer {
        tr:nth-of-type(1) {
            td:nth-last-of-type(1) {
                color: #fa5858;
                font-size: 18px;
                font-weight: bold;
            }
            td:nth-last-of-type(2) {
                text-align: right;
            }
        }
    }
}
.sku-box {
    .specifications-value-box {
        margin-bottom: 20px;
        .specifications-title {
            color: #333;
            -webkit-text-stroke: 0.2px;
            font-size: 14px;
        }
        .specifications-value {
            text-align: center;
            min-width: 50px;
            padding: 2px 4px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            color: #666;
            margin-right: 20px;
            margin-top: 10px;
            &.active {
                color: #fff;
                border: 1px solid #1b93f8;
                background: #1b93f8;
            }
        }
    }
    .specifications-value-box + .specifications-value-box {
        margin-top: 10px;
    }
}
.avatar {
    width: 80px;
    height: 80px;
}
</style>
